import React, { useState, useEffect,useRef } from "react";

import styles from "./RemarkSetting.less";

import icon_arrow from "@/assets/icons/icon-select-arrow.png";

import { Input,message} from "antd";

import type { InputRef } from 'antd';

import {saveRemark} from "../../portfolio";

import { getUrlParam } from "@/utils/utils";

const { TextArea } = Input;


const limit = 30;

interface RemarkSettingProps {
  saveFormValues: (remark:string) => void;
  formValues?: any;
  visible: boolean;
  remark?:string;
  innerCode?:string|number;
}

const RemarkSetting = (props: RemarkSettingProps) => {
  const {
    saveFormValues,
    formValues,
    visible,
    remark,
    innerCode
  } = props;

  
  const [text,setText] = useState(remark);
  const inputRef = useRef<InputRef>(null);

  useEffect(()=>{
    setText(remark);
  },[remark])

  const onChangeInput = (e) => {
    const { value } = e.target;
    setText(value);
  };

  const onHandleClick = ()=>{
    if(remark==text){
      saveFormValues&&saveFormValues(text);
      return
    };
    saveRemark({
      innerCode,
      remark:text,
      portfolioCode:getUrlParam("id")
    }).then((res:any)=>{
      if(res?.code === "0"){
        message.success("编辑成功");
      }
      saveFormValues&&saveFormValues(text);
    })

  }

  // useEffect(()=>{
  //   setText(remark);
  // },[remark])

  useEffect(()=>{
    
    if(!visible)return;
    console.log('visible',visible)
    setTimeout(()=>{
      inputRef.current!.focus({
        cursor: 'start',
      });
      
    })
    

  },[visible])
  
  return (
    <div onClick={(e)=>{e.stopPropagation()}}>
      <div className={styles.header}>
        <p className={styles.title}>编辑</p>
        
        <div className={styles.header_btn} onClick={onHandleClick} />
      </div>

      <div className={styles.peSetting}>
        <div className={styles.dark_input_wrapper} >
          <TextArea
            className={styles.dark_input_container}
            // placeholder="请输入"
            // showCount 
            style={{ height: 74, resize: 'none' }}
            maxLength={limit}
            onChange={(e) => {
              onChangeInput(e);
            }}
            ref={inputRef} 
            value={text}
          />
         
          
        </div>
        <p className={styles.number_container}>
          <span>{`${text?.length||0}/${limit}`}</span>
        </p>
        
      </div>
    </div>
  );
};

export default RemarkSetting;
